<style>
    .ly-top-navi-main {
        height: 58px;
        line-height: 56px;
        position: fixed;
        top: 0;
        z-index: 100;
    }

    .full-screen .ly-top-navi-main {
        left: 55px;
    }
    .full-screen.top-bar-full .ly-top-navi-main{
        left: 0;
    }
    .ly-top-navi-main-content {
        height: 100%;
        width: 100%;
        display: flex;
    }

    /* padding:20px 0 20px 30px; */
    .ly-top-navi-main-title {
        height: 100%;
        line-height: 56px;
        color: #111;
        font-size: 16px;
        padding-left: 20px;
        font-weight: bold;
    }

    /* 顶部面包屑 */
    .ly-top-navi-main-title .el-breadcrumb {
        line-height: 58px;
    }

    /* 分栏样式 */
    .ly-top-navi-main-subfield {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .ly-top-navi-main-subfield .split-line {
        padding-left: 20px;
        line-height: 60px;
        padding-right: 20px;
        font-size: 14px;
        border-right: 1px solid #e6e6e6;
        color: #475669;
        font-weight: bold;
    }

    .ly-top-navi-main-subfield .el-menu {
        background: #fff;
        flex: 1;
        height: 58px;
    }

    .ly-top-navi-main .el-menu--horizontal > .el-menu-item {
        height: 58px;
    }

    .ly-top-navi-main .navi-row {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .ly-top-navi-main .el-icon-back {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        box-sizing: border-box;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        background: #c7c7c7;
        color: #fff;
        line-height: 22px;
    }

    .ly-top-navi-main .back-title {
        font-size: 14px;
        color: #475669;
        font-weight: bold;
        margin-left: 10px;
    }

    .ly-top-navi-main .explain {
        display: flex;
        align-items: center;
        padding: 0 6px 0 5px;
        font-size: 12px;
        color: var(--primary);
        font-weight: 400;
        height: 22px;
        background-color: rgba(30, 111, 255, 0.09);
    }

    .top-bar-full .ly-top-navi-main {
        border-bottom: none;
        background: #f5f7f9;
    }

    .ly-top-navi-main-des {
        color: #999;
        display: flex;
        flex: 1;
        height: 100%;
        align-items: center;
    }

    .ly-top-navi-main-des .des-text {

        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
        margin: 0 12px;
    }

    .ly-top-navi-main-right {
        margin-right: 10px;
    }

    .ly-top-navi-main .ly-top-navi-main-subfield .split-line {
        background: #fff;
    }

    .top-bar-full .ly-top-navi-main .ly-top-navi-main-subfield .split-line {
        border-bottom: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6;
    }


</style>
<template>
    <div class="ly-top-navi-main" :class="['ly-top-navi-'+type]">
        <div class="ly-top-navi-main-content">
            <div class="ly-top-navi-main-title" v-if="type!='tab'">
                <div v-if="type=='bread'" class="el-breadcrumb col-center">
                    <span class="el-breadcrumb__item">
                        <template v-if="!breads||breads.length==0">
                            <template v-for="(v,k) in items">
                                 <span class="el-breadcrumb__inner is-link" @click="tabClick(k)">{{v}}</span>
                                 <span class="el-breadcrumb__separator">/</span>
                            </template>
                        </template>
                        <template v-else>
                           <template v-for="(v,k) in breads">
                                 <span class="el-breadcrumb__inner is-link">{{v}}</span>
                                  <span class="el-breadcrumb__separator">/</span>
                           </template>
                        </template>
                    </span>
                    <span class="el-breadcrumb__item">
                        <span class="el-breadcrumb__inner"> {{title_c?title_c:title}}</span>
                        <span class="el-breadcrumb__separator">/</span>
                    </span>
                </div>
                <div class="navi-row" v-if="type=='title'">
                    <slot name="title">{{title_c?title_c:title}}</slot>
                </div>
                <div class="navi-row" v-if="type=='back'">
                    <div v-link.back class="el-icon-back"></div>
                    <div class="back-title">
                        <slot name="title">{{title_c?title_c:title}}</slot>
                    </div>
                </div>
            </div>
            <div class="ly-top-navi-main-subfield" v-else>
                <div v-if="title" class="split-line">
                    <slot name="title">{{title_c?title_c:title}}</slot>
                </div>
                <ul class="el-menu el-menu-demo el-menu--horizontal">
                    <li v-for="(v,k) in items" @click="tabClick(k)"
                        :class="{'is-active': current_tab==k||'/'+current_tab==k}"
                        class="el-menu-item ">{{v}}
                    </li>
                </ul>
            </div>
            <div class="ly-top-navi-main-des">
                <div class="des-text" v-if="type!='tab'">{{description_c?description_c:description}}</div>
                <a v-if="helpLink||helpLink_c" target="_blank" :href="helpLink_c?helpLink_c:helpLink" class="explain common-radius">
                    <i style="padding-right: 5px;font-size: 14px;" class="el-icon-notebook-2"></i>
                    {{helpLinkText}}
                </a>
                <slot name="extra">
                    <slot name="extra"></slot>
                </slot>
            </div>

            <div class="ly-top-navi-main-right link">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-navi',
            props: {
                title: {
                    'default': ''
                },
                description: {
                    'default': ''
                },
                helpLink: {
                    'default': ''
                },
                helpLinkText: {
                    'default': '功能说明'
                },
                type: {
                    'default': 'title' //可选 title(默认),tab,bread,back
                },
                breads: {
                    type: Array,
                    'default': function () {
                        return [];
                    }
                },
                items: {
                    type: Object,
                    'default': function () {
                        return {}
                    }
                }
            },
            data: function () {
                return {
                    current_tab: null,
                    title_c: null,
                    description_c: null,
                    helpLink_c: null
                }
            },
            created: function () {
                this.current_tab = this.router.hash;
                var pageConfig = Ly.config().pageInfo['/'+this.router.page];
                if (pageConfig) {
                    this.title_c=pageConfig.title;
                    this.description_c=pageConfig.description;
                    this.helpLink_c=pageConfig.helpLink;

                }
            }, methods: {
                tabClick: function (link) {
                    this.current_tab = link;
                    Rap.go(link);
                }
            }
        }
    });
</script>
